<template>
	<view class="plywood-instore-edit-page-content">
		<view class="form-view">
			<!-- ******************** -->
			<long-width-height-form-item 
				class="forma-item"
				label="尺寸" 
				:long.sync="form.materiallength" 
				:width.sync="form.materialwidth" 
				:height.sync="form.materialhigh"
				:msg="msg.materialspec"
				:required="true"
			/>
			<scan-input-form-item
				type="digit"
				label="数量"
				v-model="form.bindquantity"
				:msg="msg.bindquantity"
				:has-scan="false"
				:has-search="false"
				:required="true"
			/>
			<!-- ******************** -->
		</view>
	</view>
</template>

<script>
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import LongWidthHeightFormItem from '@/pages/components/LongWidthHeightFormItem.vue'
const defaultForm = {
	bindquantity:null,
	materiallength:null,
	materialwidth:null,
	materialhigh:null
}
export default {
	name:'plywoodInstoreEditPageContent',
	components:{ScanInputFormItem,LongWidthHeightFormItem},
	data(){
		return {
			form:{...defaultForm},
			msg:{
				materialspec:'',
				bindquantity:''
			}
		}
	},
	watch:{
		'form.materiallength'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchSpec()
			}
		},
		'form.materialwidth'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchSpec()
			}
		},
		'form.materialhigh'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchSpec()
			}
		},
		'form.bindquantity'(newVal,oldVal) {
			if (newVal!==oldVal) {
				this.watchBindquantity()
			}
		}
	},
	methods:{
		init(obj){
			if (obj) {
				this.form = {...obj}
			} else {
				this.form = {...defaultForm}
			}
		},
		getFormValues(){
			return {...this.form}
		},
		checkConfirm(){
			let res = {flag:true,data:{}}
			res.data = this.getFormValues()
			if (res.flag && (!res.data.materiallength || !res.data.materialwidth || !res.data.materialhigh)) {
				this.msg.materialspec = '请先录入尺寸！'
				res.flag = false
			} else {
				this.msg.materialspec = ''
			}
			if (res.flag && !res.data.bindquantity) {
				this.msg.bindquantity = '请先录入数量！'
				res.flag = false
			} else {
				this.msg.bindquantity = ''
			}
			return res;
		},
		watchSpec(){
			if (this.form.materiallength && this.form.materialwidth && this.form.materialhigh) {
				this.msg.materialspec = ''
			}
		},
		watchBindquantity(){
			if(this.form.bindquantity) {
				this.msg.bindquantity = ''
			} else {
				this.msg.bindquantity = '请先录入数量！'
			}
		}
	}
}
</script>

<style scoped lang="scss">
.plywood-instore-edit-page-content{
	height: 100%;
	box-sizing: border-box;
	padding-bottom: 12rpx;
	.form-view{
		height: 100%;
		overflow: auto;
	}
	.forma-item{
		margin-bottom: 24rpx;
	}
}
</style>